<script setup>
import CustomInput from "../components/CustomInput/CustomInput.vue";
import UserName from "../components/CustomInput/UserName.vue";
import ModelModifiers from "../components/CustomInput/ModelModifiers";
import { ref } from "vue";
const BookTitle = ref('组件')
const firstName = ref('John')
const lastName = ref('Doe')

const myText = ref('abc')
</script>

<template>
  <div>
    <h3>组件使用v-model</h3>
    <!-- 原理 -->
    <!-- <CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" /> -->
    <!-- 等价于 -->
    <!-- <CustomInput v-model="modelValue" /> -->
    <!-- 以title为例 -->
    <!-- <CustomInput v-model="title" /> -->
    <!-- <div>{{title}}</div> -->
    <!-- 我们可以通过给 v-model 指定一个参数来更改这些名字： -->
    <!-- <CustomInput v-model:title="BookTitle" />
    <div>{{BookTitle}}</div> -->
    <!-- 另一种写法 -->
    <CustomInput v-model="BookTitle" />
    <div>{{BookTitle}}</div>
    <hr />
    <h3>多个v-model绑定</h3>
    <UserName v-model:first-name="firstName" v-model:last-name="lastName" />
    <div>{{firstName}}<span> - </span>{{lastName}}</div>
    <!-- v-model 内置修饰符 例如 .trim，.number 和 .lazy。 -->
    <hr />
    <h3>自定义v-model修饰符</h3>
    <ModelModifiers v-model.capitalize="myText" />
    <div>{{myText}}</div>
    <!-- 对于又有参数又有修饰符的 v-model 绑定，生成的 prop 名将是 arg + "Modifiers"。 -->
  </div>
</template>